<template>
  <!-- 操作日志 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="100px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item :label="$t('text.UserName')">
              <el-input v-model.trim="queryObj.userName" :placeholder="$t('text.UserName')" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="模块">
              <el-input v-model.trim="queryObj.module" placeholder="模块" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="旧值">
              <el-input v-model.trim="queryObj.oldValue" placeholder="旧值" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="新值">
              <el-input v-model.trim="queryObj.newValue" placeholder="新值" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="内容">
              <el-input v-model.trim="queryObj.content" placeholder="内容" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item :label="$t('text.Time')">
              <el-date-picker
                v-model="timestart_end"
                style="width:100%"
                type="datetimerange"
                :start-placeholder="$t('text.StartTime')"
                :end-placeholder="$t('text.EndTime')"
                range-separator="-"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleDataChanged"
              />
            </el-form-item>
          </el-col>
          <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />

        </el-row>
      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left" />
        <div style="float: right">
          <div style="font-size: 30px; display: inline-block; margin-right: 5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" :content="$t('button.listLocation')" placement="top" style="cursor:pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isuserName">{{ $t('text.UserName') }}</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.module">module</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.oldValue">oldValue</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.newValue">newValue</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.content">content</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iscreateTime">{{ $t('text.createTime') }}</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton
            style="float:right"
            :refresh-click="refreshClick"
            :table-data="tableData"
            :table-data-all="tableDataAll"
            :headers-arr="headersArr"
            :headers-relations="headersRelations"
            @exportAllfn="exportAll"
          />
        </div>
      </el-row>

      <!-- 任务总表   v-if="queryObj.userName !== ''"-->
      <el-table
        ref="operationTable"
        v-loading="listLoading"
        :data="tableData"
        border
        height="calc( 100vh - 275px)"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;"
      >
        <el-table-column v-if="deleteCell.isuserName" prop="userName" :label="$t('text.UserName')" align="center" width="140" />
        <el-table-column v-if="deleteCell.module" prop="module" label="模块" align="center" width="140" />
        <el-table-column v-if="deleteCell.oldValue" prop="oldValue" label="旧值" />
        <el-table-column v-if="deleteCell.newValue" prop="newValue" label="新值" />
        <el-table-column v-if="deleteCell.content" prop="content" label="内容" />
        <el-table-column v-if="deleteCell.iscreateTime" prop="createTime" :label="$t('text.createTime')" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | formatDate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
    </el-card>
  </div>
</template>

<script>
import { GetOperateLog } from '@/api/log'
export default {
  name: 'OperationLog',
  data() {
    return {
      // 请求数据
      queryObj: {
        'module': '',
        'userName': '',
        'oldValue': '',
        'newValue': '',
        'content': '',
        page: 0, // 第几页
        size: 0, // 每页条数
        startTime: null, // 开始日期
        endTime: null // 结束日期
      },
      pagionObj: {
        size: 50, // 每页几条数据
        currentPage: 1, // 当前第几页数据
        total: 100 // 总数
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间数据
      timestart_end: [],
      isopen: false,
      listLoading: true,
      // 列位置 显示隐藏
      deleteCell: {
        isuserName: true,
        module: true,
        oldValue: true,
        newValue: true,
        content: true,
        iscreateTime: true
      },
      // excel 数据的key 表头数据
      headersArr: [
        '用户名',
        '模块',
        '旧值',
        '新值',
        '内容',
        '创建时间'
      ],
      // 将表头转换成中文
      headersRelations: {
        用户名: 'userName',
        模块: 'module',
        旧值: 'oldValue',
        新值: 'newValue',
        内容: 'content',
        创建时间: 'createTime'
      }
    }
  },
  // 监听时间的变化
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.queryObj.startTime = this.timestart_end[0]
        this.queryObj.endTime = this.timestart_end[1]
      } else {
        this.queryObj.startTime = null
        this.queryObj.endTime = null
      }
    }
  },
  mounted() {
    this.queryData()
    this.listLoading = false
    // console.log(this.$refs.operationTable)
    // console.log(this.$refs.operationTable._props.data)
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true
      this.queryObj.size = this.pagionObj.size
      this.queryObj.page = this.pagionObj.currentPage
      const res = await GetOperateLog(this.queryObj)
      this.tableData = res.data.data
      this.pagionObj.pageCount = res.data.pageCount
      this.pagionObj.total = res.data.count
      this.listLoading = false
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1
      this.queryData()
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true
      this.queryData()
      this.listLoading = false
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val
      this.queryData()
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val
      this.queryData()
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0]
        this.queryObj.endTime = this.timestart_end[1]
      } else {
        this.queryObj.startTime = null
        this.queryObj.endTime = null
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },
    // 重置
    resetQuery() {
      this.queryObj.module = ''
      this.queryObj.userName = ''
      this.queryObj.oldValue = ''
      this.queryObj.newValue = ''
      this.queryObj.content = ''
      this.queryObj.createTime = ''
      this.timestart_end = []
    },
    // excel导出全部
    async exportAll() {
      this.queryObj.size = 990000
      const res2 = await GetOperateLog(this.queryObj)
      this.tableDataAll = res2.data.data
    }
  }
}
</script>

